The realization of mobile phone verification design

People for product design such things, often easy to http://www.aliyun.com/zixun/aggregation/7232.html "> Puny, in the cosmic level of rhetoric, but can not fall, only floating." Real to their own hands, will find a lot of problems, practice and theory is too far away, it is easy to say a set, do a set. So it is still necessary to practice, to do things, can really improve their level.

Recently, there is a chance to contact the design of a mobile phone verification process, which also gives me the opportunity to engage in hands-on, Mano. For beginners, I think the most important thing is not to make what is satisfied with the perfect design, but through each of the hands-on design, the idea of their own implementation into practice, to communicate to compare, will find themselves to consider the shortcomings of the problem, thinking of the blind spot, and then summed up thinking, to take its essence to its dross effect, In order to accelerate the rookie to the old bird change.

Anyway。 This talk of the mobile phone verification process is as follows:



This process is a sub-process, from the process to see, there is no special place, this kind of process design is already very common. However, there is an additional requirement for this validation process, which requires the user to fill in the ID or username of the inviter, but this step is required. We don't think about whether this step is appropriate in this process, and that's what it's all about. Where does this step fit in, how does he not influence the verification process, and make sure that people will notice and not feel disgusted?

The following is the first draft of the design as an analytical material:

Analysis：

From this design page, there are two main problems identified.

The first is the invitation steps put in the phone number, the input verification code to partition the steps, the verification process is interrupted.

The second is the prompt text too much, affect the visual effect, and the hint effect is not ideal.

Modify：

Next, my revised version, the overall process is divided into three steps.

First step:

Step Two:

Step Three:

Analysis：

First of all, the idea of such a change.

1. Fill in the invitation step is put to the final step of the success page. The goal is to weaken the impact of this step on the validation process, but also to ensure that it is attractive enough to allow the user to not ignore, because the success of the page in the user's task is not large, only such a may need to fill in the place.

2. The complete validation button in the third step page indicates the normal end of the process. Click to trigger the Inviter ID member name to save the event and close the page.

3. Enter the mobile phone number and input verification code is separated into two steps. This is done to balance the flow of gravity. Because there is another step to fill in the invitation, if the two tasks on the same page, then the main process tasks are completed in the first step, verify the success of the page plus fill in the invitation steps, it is neither fish nor fowl. Users will feel that the previous task is complete, how do you have something to do here? The mood may be affected if the user's expectations are not met. Also, if the first step is to complete the validation task, the final step is only to show the results of the validation, and a process with the main purpose of message display is not appropriate to add the task.

4. Added two steps to resend and modify mobile phone number. This is to flow the process forward. Resend is the redo Send verification code text message This step, change mobile phone number can return to the first step, fill in the mobile phone number again.

These are some ideas of design modification. After completing my own version, I looked at some of the other modified pieces of children's shoes. Really is like I said, only after finishing to summarize to compare, will find their own shortcomings and blind spots.

* The following is the phone verification design to modify some of the sentiment:

First, you can fill in the invitation of this step as a semi-hidden event, triggered after the activation filling process. This point was not previously thought to be a blind spot. So you can consider

Put the input phone number and verification on a page, shorten the process.

Second, the wording of the hint still has room for streamlining. You can consider using the button caption and the half hide hint area. In the following illustration, the button title and the tip area in the lower right corner (click on the trigger tip overlay) are sufficient to indicate the problem and no other prompt text is required.

Third, resend time limit. For example, 2 minutes countdown, not allowed to click "Resend" in 2 minutes, to avoid redundant server load.

Four, should consider using AJAX without refreshing dynamic update. For example, click to get the Verification Code SMS button, button variable "Verify code message sent" message. Step in the transition to add animation display, people more clearly feel the flow of interactive process and so on.

Summary：

This design modification is just a simple sub process, not complex. Can be such a simple process, the real time to consider a lot of things, really want to do better is to spend some thoughts. Practice for the King, product design will eventually fall to the field, more hands-on to make things, and then think, conducive to our product design on the road to go more brisk.

Source: http://paradisefeng.com/?p=45